<template>
  <div id="app">
    <!-- 上面 放一个router-view来进行占位 -->
    <div class="mainapp">
    <router-view></router-view>
  </div>
   
    <!-- 底部放一个tabbar组件用来导航 -->
    <div class="footer">
      <van-tabbar v-model="active">
        <router-link to="/Home">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      </router-link>
      <router-link to="/News">
        <van-tabbar-item icon="search">新闻咨询</van-tabbar-item>
      </router-link>
      <router-link to="/Shop">
        <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
      </router-link>
      <router-link to="/Image">
        <van-tabbar-item icon="setting-o">图片分享</van-tabbar-item>
      </router-link>
      
      </van-tabbar>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      active: 0,  //标记当前选择的索引号
    };
  },
}
</script>

<style>
.footer{
  display: flex;
}

.footer a {
  flex:1;
}

/* 统一设定所有组件的顶部导航栏的样式 */
.van-nav-bar{
  background-color: #0094ff !important;
}

.van-nav-bar__title,.van-nav-bar__text,.van-nav-bar .van-icon {
  color:#fff !important;
}

.mainapp {
  padding-bottom: 50px;
}

</style>
